<template>
  <el-tabs v-model="TabsValue" type="card" class="demo-tabs" closable @tab-remove="removeTab">
    <el-tab-pane v-for="item in tabsPage" :key="item.name" :label="item.title" :name="item.name">
    </el-tab-pane>
  </el-tabs>
  <router-view />
</template>
<script lang="ts" setup>
import { menuStore } from '@/store/menu';
import {storeToRefs} from "pinia"
import { useRouter } from "vue-router";

const router = useRouter();
const store = menuStore();

// 动态获取菜单数据
const {tabsPage, TabsValue} = storeToRefs(store)

// 监听菜单点击数据变化，打开页面
store.$subscribe((mutation, state) => {
  router.push({ name: state.TabsValue });
})

// 标签页删除方法
const removeTab = (targetName: string) => {
  let { TabsValue, tabsPage } = store;
  const tabs = tabsPage
  let activeName = TabsValue
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }
  tabsPage = tabs.filter((tab) => tab.name !== targetName)
  store.setTabsValue(activeName)
  store.settabsPage(tabsPage)
}
</script>
<style>
.demo-tabs>.el-tabs__content {
  /* padding: 32px; */
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
